<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Nested Column Headers</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Nested Column Headers</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style scoped>
/* custom styles for this example */
.dt-example {margin:1em;}

/* css to counter global site css */
.dt-example th {text-transform:none;}
.dt-example table {width:auto;}
.dt-example caption {display:table-caption;}
</style>

<div class="intro">
    <p>The DataTable widget supports nested column headers, which can be defined in the columnset definition using the <code>children</code> configuration.</p>
</div>

<div class="example yui3-skin-sam">
    <div id="nested" class="yui3-skin-sam dt-example"></div>

<script type="text/javascript">
YUI().use("datatable-base", function (Y) {
    var nestedCols = [
        {label:"Train Schedule", children:[
            {key: "track"},
            {label:"Route", children: [
                {key:"from"},
                {key:"to"}
            ]}
        ]}
    ],
    data = [
        {track:"1", from:"Paris", to:"Amsterdam"},
        {track:"2", from:"Paris", to:"London"},
        {track:"3", from:"Paris", to:"Zurich"}
    ],

    cs = new Y.Columnset({definitions:nestedCols}),
    dt = new Y.DataTable.Base({columnset:nestedCols, recordset:data, summary:"Train schedule", caption:"Table with nested column headers"}).render("#nested");
});
</script>

</div>

<h2>Using Nested Column Headers</h2>

<p>Use nested columns to visually group related column headers. The <code>children</code> attribute associates a parent column to its descendants. Note that only bottom-level columns will have data values. Any parent columns are there for presentation purposes only and do not hold any data values directly &mdash; therefore parent columns may have a <code>label</code> value but a  <code>key</code> value is unnecessary.</p>

<pre class="code prettyprint">&lt;div id=&quot;nested&quot; class=&quot;yui3-skin-sam dt-example&quot;&gt;&lt;&#x2F;div&gt;

&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
YUI().use(&quot;datatable-base&quot;, function (Y) {
var nestedCols = [
    {label:&quot;Train Schedule&quot;, children:[
        {key: &quot;track&quot;},
        {label:&quot;Route&quot;, children: [
            {key:&quot;from&quot;},
            {key:&quot;to&quot;}
        ]}
    ]}
],
data = [
    {track:&quot;1&quot;, from:&quot;Paris&quot;, to:&quot;Amsterdam&quot;},
    {track:&quot;2&quot;, from:&quot;Paris&quot;, to:&quot;London&quot;},
    {track:&quot;3&quot;, from:&quot;Paris&quot;, to:&quot;Zurich&quot;}
],

cs = new Y.Columnset({definitions:nestedCols}),
dt = new Y.DataTable.Base({columnset:nestedCols, recordset:data, summary:&quot;Train schedule&quot;, caption:&quot;Table with nested column headers&quot;}).render(&quot;#nested&quot;);
});
&lt;&#x2F;script&gt;</pre>


</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="This example illustrates simple DataTable use cases.">
                                        <a href="datatable-basic.html">Basic DataTable</a>
                                    </li>
                                
                            
                                
                                    <li data-description="DataTable loaded with JSON data from a remote webservice via DataSource.Get">
                                        <a href="datatable-dsget.html">DataTable + DataSource.Get + JSON Data</a>
                                    </li>
                                
                            
                                
                                    <li data-description="DataTable loaded with XML data from a remote webservice via DataSource.IO.">
                                        <a href="datatable-dsio.html">DataTable + DataSource.IO + XML Data</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Custom format data for display.">
                                        <a href="datatable-formatting.html">Formatting Row Data for Display</a>
                                    </li>
                                
                            
                                
                                    <li data-description="DataTable with nested column headers.">
                                        <a href="datatable-nestedcols.html">Nested Column Headers</a>
                                    </li>
                                
                            
                                
                                    <li data-description="DataTable with column sorting.">
                                        <a href="datatable-sort.html">Column Sorting</a>
                                    </li>
                                
                            
                                
                                    <li data-description="DataTable with vertical and/or horizontal scrolling rows.">
                                        <a href="datatable-scroll.html">Scrolling DataTable</a>
                                    </li>
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                                    <li data-description="Shows how to instantiate multiple Panel instances, and use nested modality to interact with a Datatable.">
                                        <a href="../panel/panel-form.html">Creating a modal form</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
